import React,{useState} from 'react'
import { ResultPage } from 'antd-mobile'
import { Exchange } from '@react-vant/icons'
import { Button, Switch, Popup,CalendarPickerView } from 'antd-mobile'
import dayjs from 'dayjs'

function Index() {
  const [visible5, setVisible5] = useState(false)
  const [date,setDate] = useState('2025-05-27')
  const [week,setWeek] = useState('周五')
  // const [wen,setWen] = useState()
  // let time = ('2025-05-27');
  const handleChose = (value)=>{
    console.log(dayjs(value).format('YYYY-MM-DD'));
    setDate(dayjs(value).format('YYYY-MM-DD'))
    setWeek(dayjs(value).format('dddd'))
    setVisible5(false)
  }
  return (
    <div>
      <ResultPage
        status=''
        title='火车票预订'
        description='便捷购票,服务您的每一次出行'
      >
        <ResultPage.Card style={{ height: 64, padding: 8 }}>
          <h1 style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
            <span>北京</span>
            <span><Exchange /></span>
            <span>上海</span>
          </h1>
        </ResultPage.Card>

        <ResultPage.Card style={{ height: 64, padding: 8 }}>
          <p style={{ display: 'flex', alignItems: 'center' }}>
            <h1 style={{ fontWeight: 'normal' }} onClick={()=>setVisible5(true)}>{date}</h1>
            <h3 style={{ fontWeight: 'normal', color: '#ccc' }}>{week}(今天)</h3>
          </p>
        </ResultPage.Card>

        <ResultPage.Card style={{ height: 120, padding: 8 }}>
          <p style={{ display: 'flex', justifyContent: 'space-around', alignItems: 'center' }}>
            <span>只看高铁动车</span>
            <span><Switch /></span>
          </p>
          <Button style={{ borderRadius: '10px' }} block color='primary' size='large'>搜索</Button>
        </ResultPage.Card>


      </ResultPage>
      <Popup
        visible={visible5}
        onMaskClick={() => {
          setVisible5(false)
        }}
        bodyStyle={{
          borderTopLeftRadius: '8px',
          borderTopRightRadius: '8px',
          minHeight: '40vh',
        }}
      >
       {/* 日历 */}
       <CalendarPickerView 
       value={Date.now()}
       min={Date.now()} 
       max={Date.now() + 10*24*60*60*1000}
       onChange={(value)=>handleChose(value)}
       />
      </Popup>
    </div>
  )
}

export default Index
